<template>
	<view>
		<view v-if="isWeixin" style="width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.3);">
			<view class="Grid Grid--center Grid--justifyCenter">
				<image style="width: 80%;" mode="widthFix" src="@/static/images/ali_pay/guide.png"></image>
			</view>
			<view class="Grid Grid--center Grid--justifyCenter" style="padding: 20px 0;" @click="navigateBack">
				<u-button style="width: 80%;" type="success" text="已完成支付？点击此链接返回上一页面"></u-button>
			</view>
		</view>
		<view v-if="isPay" class="Grid Grid--center Grid--justifyCenter" style="padding: 10% 0;">
			<u-loading-icon text="正在请求打开支付宝..." size="16" textSize="14"></u-loading-icon>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import axios from 'axios'
	import {
		BASEURL
	} from '@/constant/index.js'

	export default {
		data() {
			return {
				isWeixin: false,
				isIOS: false,
				isPay: true
			};
		},
		computed: {
			...mapState({
				userInfo: state => state.login.userInfo,
				redirect_uri: state => state.login.redirect_uri
			}),
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: '支付宝支付'
			});
		},
		onLoad(options) {
			this.params = options
			this.initWeixin()
		},
		methods: {
			initWeixin() {
				var ua = window.navigator.userAgent.toLowerCase();
				this.isWeixin = /micromessenger/i.test(ua);
				this.isIOS = /iphone|ipad|ipod/i.test(ua);
				//判断当前环境是否为微信浏览器，在微信浏览器中就显示引导页，在外部浏览器直接请求支付
				if (!this.isWeixin) {
					if (this.params) {
						this.getAliPay()
					} else {
						uni.showModal({
							showCancel: false,
							title: '支付参数错误',
							success() {
								uni.navigateBack({});
							}
						})
					}
				}
			},
			async getAliPay() {
				// 发起支付宝支付
				this.isPay = true
				axios({
					url: `${BASEURL}/api/member.Member/getAlipayUrl?order_no=${this.params.order_no}`,
					method: 'get',
					headers: {
						'Content-Type': undefined,
						'Apitoken': this.params.token
					}
				}).then((response) => {
					uni.hideLoading();
					if (response.status === 200) {
						window.location.href = response.data.data
					} else {
						this.$showToast('网络异常')
					}
				}).catch(error => {
					uni.hideLoading();
				})
			},
			getSearchString(key, Url) {
				var str = Url;
				str = str.substring(1, str.length); // 获取URL中?之后的字符（去掉第一位的问号）
				// 以&分隔字符串，获得类似name=xiaoli这样的元素数组
				var arr = str.split("&");
				var obj = new Object();
				// 将每一个数组元素以=分隔并赋给obj对象
				for (var i = 0; i < arr.length; i++) {
					var tmp_arr = arr[i].split("=");
					obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1]);
				}
				return obj[key];
			},
			navigateBack() {
				if (this.params.redirect_uri) {
					// 防封
					if (this.params.content_id) {
						window.location.href = `${decodeURIComponent(this.params.redirect_uri)}/user/#/pages/details/details?appid=${this.params.appid}&content_id=${this.params.content_id}`
					} else {
						window.location.href = `${decodeURIComponent(this.params.redirect_uri)}/user/#/?appid=${this.params.appid}&index=1`
					}
				} else {
					// 常规
					if (this.params.content_id) {
						uni.redirectTo({
							url: `/pages/details/details?appid=${this.params.appid}&content_id=${this.params.content_id}`
						});
					} else {
						uni.reLaunch({
							url: `/pages/index/index?appid=${this.userInfo.appid}&index=1`
						});
					}
					
				}
			}
		}
	}
</script>

<style lang="scss">

</style>